/**
 * Created by mac on 2018/5/4.
 */
import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity} from 'react-native';
import { Menu, Label } from 'iftide';


export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state = {
            Data1: [
                {
                    menu:'菜单项目1菜单项目1菜单项目1菜单项目1',item:[
                    {label: '菜单项目1-1', checked:true},
                    {label: '菜单项目1-2', checked:false},
                    {label: '菜单项目1-3', checked:false},
                    {label: '菜单项目1-4', checked:false}
                ]},
                {menu:'菜单项目2',item:[
                    {label: '菜单项目2-1', checked:false},
                    {label: '菜单项目2-2', checked:true},
                    {label: '菜单项目2-3', checked:false},
                ]},
                {menu:'菜单项目3',item:[
                    {label: '菜单项目3-1', checked:true},
                    {label: '菜单项目3-2', checked:false},
                ]},
                {menu:'菜单项目4',item:[
                    {label: '菜单项目4-1', checked:false},
                    {label: '菜单项目4-2', checked:true},
                    {label: '菜单项目4-3菜单项目4-3菜单项目4-3菜单项目4-3', checked:false},
                ]},
            ],
            Data2: [
                {
                    menu:'菜单项目1',badgeText:"3",item:[
                    {label: '菜单项目1-1', value: '1', checked:false},
                    {label: '菜单项目1-2', value: '2', checked:true},
                    {label: '菜单项目1-3', value: '3', checked:false},
                    {label: '菜单项目1-4', value: '4', checked:false}
                ]},
                {menu:'菜单项目2菜单项目2菜单项目2',badgeText:"3",item:[
                    {label: '菜单项目2菜单项目2菜单项目2菜单项目2-1', value: '1', checked:false},
                    {label: '菜单项目2-2', value: '2', checked:false},
                    {label: '菜单项目2-3', value: '3', checked:true},
                ]},
                {menu:'菜单项目3',badgeText:"2",item:[
                    {label: '菜单项目3-1', value: '1', checked:true},
                    {label: '菜单项目3-2', value: '2', checked:false},
                ]},
                {menu:'菜单项目4',item:[
                    {label: '菜单项目4-1', value: '1', checked:true},
                    {label: '菜单项目4-2', value: '2', checked:false},
                    {label: '菜单项目4-3', value: '3', checked:false},
                    {label: '菜单项目4-4', value: '4', checked:true},
                    {label: '菜单项目4-5', value: '5', checked:false},
                    {label: '菜单项目4-6', value: '6', checked:false}
                ]}
            ]
        }
    }

    _onClick(type){
        switch (type){
            case 'radio1':
                this.menu1._show();
                break;
            case 'radio2':
                this.menu2._show();
                break;
            case 'checkbox':
                this.menu3._show();
                break;
        }
    }
    onPress=(index,data)=>{
        console.log("radio:"+index,data)
    }
    onConfirm=(data)=>{
        console.log("checkBox:"+data)
    }

    render(){

        return(
            <View style={{flex:1}}>
                <TouchableOpacity
                    onPress={() => this._onClick('radio1')}>
                    <View style={styles.label}>
                        <Label text = '菜单样式一：2级单选' fontWeight={'bold'} textDecorationLine={'underline'}/>
                    </View>
                </TouchableOpacity>
                <Menu
                    ref={(obj) =>{this.menu1 = obj}}
                    data={this.state.Data1}
                    style={'radio'}
                    defaultIndex={2}
                    type={2}
                    onPress={this.onPress}
                />


                <TouchableOpacity
                    onPress={() => this._onClick('checkbox')}>
                    <View style={styles.label}>
                        <Label text = '菜单样式三：2级多选' fontWeight={'bold'} textDecorationLine={'underline'}/>
                    </View>
                </TouchableOpacity>
                <Menu
                    ref={(obj) =>{this.menu3 = obj}}
                    data={this.state.Data2}
                    initial={this.state.index}
                    style={'checkbox'}
                    defaultIndex={0}
                    type={2}
                    onConfirm={this.onConfirm}
                    height={360}
                    />

            </View>
        );
    }
}

const styles = StyleSheet.create({
    label: {
        padding: 13,
        backgroundColor: '#F5F7F9',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
    },
});